<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.container{text-align:center;overflow:hidden}
		.container ul li{transition:all .6s;}
		.container li.active{transform:scale(1.3);color:red;}
		.wordList{list-style:none}
		audio{display:block;width:80vw;margin:auto;position:sticky;top:0}
		</style>
	</head>
	<body>
		<audio src="/article_files/2/files/歌词/最佳歌手.mp3" controls></audio>
		<div class="container">
		    <ul class="wordList"></ul>
		</div>
		<script>
			function getLrc(){
			            return new Promise(function(resolve,reject){
			                var xhr=new XMLHttpRequest();
			                xhr.open("GET","/article_files/2/files/歌词/最佳歌手.lrc");
			                xhr.onload=function(){
			                    if(xhr.status==200){
			                        resolve(xhr.responseText);
			                    }else{
			                        reject(xhr.status);
			                    }
			                }
			                xhr.send();
			            })
			        }
			        async function start(){
			            try{
			            var lrc=await getLrc();
			            var lrcArray=lrc.split("\n");
			            var doms={
			                audio:document.body.querySelector("audio"),
			                ul:document.querySelector(".wordList"),
			                container:document.querySelector(".container")
			            }
			            //将数组转为Map集合，m存储时间和歌词，pastm存储已经读过的时间
			            var m=new Map(),pastm=new Set();
			            //是用正则表达式获取歌词时间和歌词
			            var reg=/\[(.+)\](.+)$/;
			            for(var item of lrcArray){
			                var result=item.match(reg);
			                //将时间转为秒
			                var [mintus,seconds]=result[1].split(":");
			                m.set(Math.round((mintus*60)+Number(seconds)),result[2]);
			            }
			            //创建歌词列表，createDocumentFragment创建一个节点片段，当需要多次添加多个元素到DOM中时，如果每次添加都直接操作DOM，会导致多次重排，影响性能。而使用文档片段，可以先将所有元素添加到片段中，然后一次性将片段添加到DOM，减少重排次数。；在使用方法和属性上与普通节点类似，但插入到DOM时，片段的内容会被转移，片段本身不会被插入，只是它的子节点被插入。
			            var frag=document.createDocumentFragment();
			            for(var key of m.keys()){
			                var li=document.createElement("li");
			                li.innerText=m.get(key);
			                li.setAttribute("lrcid",`id${key}`);
			                frag.appendChild(li);
			            }
			            doms.ul.appendChild(frag);
			            doms.audio.addEventListener("timeupdate",function(){
			                //获取对应歌词元素
			                var wordLiElement=doms.ul.querySelector(`[lrcid=id${Math.round(this.currentTime)}]`);
			                if(wordLiElement!=null&&!pastm.has(wordLiElement.getAttribute("lrcid"))){
			                    //这是一个【可选链式语法糖(?.)】当链式内容不存在时返回undefined，而不会报错
			                    doms?.ul?.querySelector(".active")?.classList?.remove("active");
			                    pastm.add(wordLiElement.getAttribute("lrcid"));
			                    wordLiElement.classList.add("active");
			                    wordLiElement.scrollIntoView({
			  behavior: 'smooth',  // 可选：平滑滚动
			  block: 'center',     // 垂直方向居中
			  inline: 'center'     // 水平方向居中
			});
			                }
			            })
			            }catch(e){
			                console.error("获取歌词失败:%s",e);
			            }
			            
			        }
			        var promise=start();</code></pre>
			        </li>
			    </ul>
			</div>
			<script type="text/javascript" charset="utf-8">
			    $("[axTab]").each(function(index,item){
			        new axTab(item);
			    })
			    function getLrc(){
			            return new Promise(function(resolve,reject){
			                var xhr=new XMLHttpRequest();
			                xhr.open("GET","/article_files/2/files/歌词/最佳歌手.lrc");
			                xhr.onload=function(){
			                    if(xhr.status==200){
			                        resolve(xhr.responseText);
			                    }else{
			                        reject(xhr.status);
			                    }
			                }
			                xhr.send();
			            })
			        }
			        async function start(){
			            try{
			            var lrc=await getLrc();
			            var lrcArray=lrc.split("\n");
			            var doms={
			                audio:document.body.querySelector("audio"),
			                ul:document.querySelector(".wordList"),
			                container:document.querySelector(".container")
			            }
			            //将数组转为Map集合
			            var m=new Map(),pastm=new Set();
			            //是用正则表达式获取歌词时间和歌词
			            var reg=/\[(.+)\](.+)$/;
			            for(var item of lrcArray){
			                var result=item.match(reg);
			                //将时间转为秒
			                var [mintus,seconds]=result[1].split(":");
			                m.set(Math.round((mintus*60)+Number(seconds)),result[2]);
			            }
			            //创建歌词列表
			            var frag=document.createDocumentFragment();
			            for(var key of m.keys()){
			                var li=document.createElement("li");
			                li.innerText=m.get(key);
			                li.setAttribute("lrcid",`id${key}`);
			                frag.appendChild(li);
			            }
			            doms.ul.appendChild(frag);
			            doms.audio.addEventListener("timeupdate",function(){
			                //获取对应歌词元素
			                var wordLiElement=doms.ul.querySelector(`[lrcid=id${Math.round(this.currentTime)}]`);
			                if(wordLiElement!=null&&!pastm.has(wordLiElement.getAttribute("lrcid"))){
			                    doms?.ul?.querySelector(".active")?.classList?.remove("active");
			                    pastm.add(wordLiElement.getAttribute("lrcid"));
			                    wordLiElement.classList.add("active");
			                    wordLiElement.scrollIntoView({
			  behavior: 'smooth',  // 可选：平滑滚动
			  block: 'center',     // 垂直方向居中
			  inline: 'center'     // 水平方向居中
			});
			                }
			            })
			            }catch(e){
			                console.error("获取歌词失败:%s",e);
			            }
			            
			        }
			        var promise=start();
		</script>
	</body>
</html>